<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:s="http://jboss.com/products/seam/taglib">
      
      <body>
      
       <h:form>
       <a4j:include viewId="toolBar.xhtml"/>
       <table style="width:100%">
        <tr>
         <td valign="top" style="width:80%">
          <rich:datascroller for="periodTypesTable"/>
          <rich:dataTable id="periodTypesTable" var="pt" value="#{periodTypeSession.periodTypes}" rows="15" style="width:100%">
              <rich:column sortBy="#{pt.code}" style="text-align:center">
                  <f:facet name="header">
                  #{messages['fina2.code']}
                  </f:facet>
                  <h:outputText value="#{pt.code}" />
              </rich:column>
              <rich:column sortBy="#{pt.description}" style="text-align:center">
                  <f:facet name="header">
                  #{messages['fina2.description']}
                  </f:facet>
                  <h:outputText value="#{pt.description}" style="text-align:center" />
              </rich:column>
              <rich:column sortIcon="/images/edit.gif" style="text-align:center">
                  <f:facet name="header">
                  #{messages['fina2.amend']}
                  </f:facet>
                  <a4j:commandButton reRender="periodTypeEdit" action="#{periodTypeSession.setSelectedPerType(pt)}" oncomplete="Richfaces.showModalPanel('periodTypeEditPanel')" image="/images/edit.gif" >
                      <a4j:actionparam name="oldCode" assignTo="#{periodTypeValidator.oldCode}" value="#{pt.code}"/>
                  </a4j:commandButton>
              </rich:column>
              <rich:column sortIcon="/images/remove.gif" style="text-align:center">
                  <f:facet name="header">
                  #{messages['fina2.delete']}
                  </f:facet>
                  <a4j:commandButton oncomplete="Richfaces.showModalPanel('confirmation')" image="/images/remove.gif" reRender="removePeriodType">
                      <a4j:actionparam name="periodTypeToRemove" assignTo="#{periodTypeSession.code}" value="#{pt.code}"/>
                  </a4j:commandButton>
                  
              </rich:column>
          </rich:dataTable>
         </td>
        </tr>
       </table>  
       </h:form>
       
       <rich:modalPanel id="confirmation" autosized="true" resizeable="false" width="300" >
        <f:facet name="header">
         #{messages['fina2.web.confirm']}
        </f:facet>
        <f:facet name="controls">
         <h:graphicImage value="../images/close.gif"  onclick="Richfaces.hideModalPanel('confirmation')"/>
        </f:facet>
        <h:form>
        <s:div id="removePeriodType">
        <table align="center" width="100%" style="font-size:12px">
         <tr>
          <td style="font-size:12px">#{messages['fina2.period.periodTypeDeleteQuestion']}</td>
         </tr>
        </table>
        </s:div>
        <rich:spacer height="5px"/>
        <table align="center">
         <tr>
          <td><a4j:commandButton action="#{periodTypeSession.removePeriodType}" value="#{messages['fina2.web.ok']}" style="width:80px" oncomplete="Richfaces.hideModalPanel('confirmation')" reRender="periodTypesTable"/></td>
          <td><rich:spacer width="3px"/></td>
          <td><a4j:commandButton ajaxSingle="true" onclick="Richfaces.hideModalPanel('confirmation')" value="#{messages['fina2.web.cancel']}" style="width:80px"/></td>
         </tr>
        </table>
        </h:form>
       </rich:modalPanel>
       
       <rich:modalPanel id="periodTypePanel" autosized="true" resizeable="false" width="470" >
        <f:facet name="header">
         #{messages['fina2.period.periodTypes']}
        </f:facet>
        <f:facet name="controls">
         <h:graphicImage value="../images/close.gif" onclick="Richfaces.hideModalPanel('periodTypePanel')"/>
        </f:facet>
      
        <h:form>
        <s:validateAll>  
        <f:facet name="beforeInvalidField">
         <s:message style="color:red;font-size:12px"/>
        </f:facet>
        <f:facet name="afterInvalidField">
         
        </f:facet>
        <f:facet name="aroundInvalidField">
         <s:div style="display:block;padding-bottom:12px"/>
        </f:facet>
        
        <s:div id="periodTypes">
        <table align="center" width="100%" style="font-size:12px">
         <tr>
          <td><rich:spacer width="12px" height="12px"/></td>
         </tr>
         <tr>
          <td>#{messages['fina2.code']}</td>
          
          <td ><rich:spacer width="30px"/></td>
          <td><div style="color:red">*</div></td>
          <td>
              <s:decorate>
               <h:inputText value="#{periodTypeSession.periodType.code}" validator="#{periodTypeValidator.validateCode}" required="true" requiredMessage="#{messages['fina2.bank.pleaseEnterCode']}" style="width:330px"/>
              </s:decorate>
          </td>
         </tr>
         <tr>
          <td><rich:spacer width="12px" height="12px"/></td>
         </tr>
         <tr>
          <td>#{messages['fina2.description']}</td>
          <td><rich:spacer width="30px"/></td>
          <td><div style="color:red">*</div></td>
          <td>
              <s:decorate> 
               <h:inputText value="#{periodTypeSession.periodType.description}" validator="#{periodTypeValidator.validateDescription}" required="true" requiredMessage="#{messages['fina2.pleaseEnterDescription']}"  style="width:330px"/>
              </s:decorate>
          </td>
         </tr>
        </table>
        <rich:spacer height="3px"/>
        <table align="center" >
         <tr>
          <td><a4j:commandButton reRender="periodTypes" action="#{periodTypeSession.addPeriodType()}" value="#{messages['fina2.web.ok']}" style="width:80px"/></td>
          <td><rich:spacer width="3px"/></td>
          <td><a4j:commandButton onclick="Richfaces.hideModalPanel('periodTypePanel');return false;" value="#{messages['fina2.cancel']}" style="width:80px"/></td>
         </tr>
        </table>
        </s:div>
        </s:validateAll>
        </h:form>
       </rich:modalPanel>
       <rich:modalPanel id="periodTypeEditPanel" autosized="true" resizeable="false" width="470">
           <f:facet name="header">
               #{messages['fina2.amend']}
           </f:facet>
           <f:facet name="controls">
               <h:graphicImage value="/images/close.gif" onclick="Richfaces.hideModalPanel('periodTypeEditPanel')"/>
           </f:facet>
           <h:form>
               <s:validateAll>
               <f:facet name="beforeInvalidField">
                   <s:message style="font-size:12px;color:red"/>
               </f:facet>
               <f:facet name="aroundInvalidField">
               
               </f:facet>
               <f:facet name="afterInvalidField">
                   <s:div style="display:block;padding-bottom:12px"/>
               </f:facet>
               <s:div id="periodTypeEdit">
                    <table align="center" width="100%" style="font-size:12px">
                       <tr>
                          <td><rich:spacer width="12px" height="12px"/></td>
                       </tr>
                       <tr>
                           <td>#{messages['fina2.code']}</td>
                           <td><div style="color:red">*</div></td>
                           <td>
                               <s:decorate>
                                  <h:inputText value="#{periodTypeSession.selectedPerType.code}" validator="#{periodTypeValidator.validateEditCode}" required="true" requiredMessage="#{messages['fina2.bank.pleaseEnterCode']}" style="width:330px"/>
                               </s:decorate>
                           </td>
                      </tr>
                      <tr>
                          <td><rich:spacer width="12px" height="12px"/></td>
                      </tr>
                      <tr>
                          <td>#{messages['fina2.description']}</td>
                          <td><div style="color:red">*</div></td>
                          <td>
                              <s:decorate> 
                                 <h:inputText value="#{periodTypeSession.description}" validator="#{periodTypeValidator.validateDescription}" required="true" requiredMessage="#{messages['fina2.pleaseEnterDescription']}"  style="width:330px"/>
                              </s:decorate>
                          </td>
                      </tr>
                </table>
                <rich:spacer height="3px"/>
                <table align="center" >
                   <tr>
                       <td><a4j:commandButton reRender="periodTypeEdit" data="#{periodTypeSession.success}" action="#{periodTypeSession.updatePeriodType()}" value="#{messages['fina2.web.ok']}" oncomplete="if(data)Richfaces.hideModalPanel('periodTypeEditPanel')" style="width:80px"/></td>
                       <td><rich:spacer width="3px"/></td>
                       <td><a4j:commandButton onclick="Richfaces.hideModalPanel('periodTypeEditPanel');return false;" value="#{messages['fina2.cancel']}" style="width:80px"/></td>
                   </tr>
                </table>
               </s:div>
              </s:validateAll>
           </h:form>
       </rich:modalPanel>
      </body>
      
</html>